Code Playground

<a class="navbar-brand hover-target" href="https://front.codes/" target="_blank">
		<img src="https://assets.codepen.io/1462889/fcy.png" alt="IG Logo">
	</a>	
						
	<div class="section">				
		<div class="center-wrap text-center">	
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center parallax-fade-top">
                        <h1>Scroll</h1>	
                    </div>
                </div>
            </div>	
		</div>
	</div>				
	<div class="section">
	</div>				
	<div class="section">
	</div>	
			
    
	<div class='cursor' id="cursor"></div>
	<div class='cursor2' id="cursor2">					
	<div class="progress-wrap">
		<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
			<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
		</svg>
	</div>
    </div>
	<div class='cursor3' id="cursor3"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css');
@charset "UTF-8";
/* Please ❤ this if you like it! */
@import url("https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese");
:root {
  font-size: 20px;
  --red: #da2c4d;
  --yellow: #f8ab37;
  --green: #2ecc71;
  --white: #ffffff;
  --grey-light: #f2f7f9;
  --grey: #ecedf3;
  --black: #080808;
  --black-blue: #1f2029;
  --black-blue-light: #353746;
  --black-blue-light-2: #404255;
  --black-blue-light-3: #4b4d64;
  --black-light: #424455;
}

body {
  font-family: "Muli", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--grey);
  background-color: var(--black-blue);
  overflow-x: hidden;
  letter-spacing: 0.2px;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

h1 {
  font-family: "Muli", sans-serif;
  font-size: 11vw;
  font-weight: 800;
  line-height: 1;
  color: var(--white);
  background: linear-gradient(160deg, var(--white), var(--yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section {
  position: relative;
  width: 100%;
  display: block;
  height: 100vh;
}

.center-wrap {
  position: absolute;
  width: 100%;
  display: block;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

/* #Progress
================================================== */
.progress-wrap {
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  z-index: 10000;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap svg path {
  fill: none;
}

.progress-wrap svg.progress-circle path {
  stroke: var(--grey);
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3 {
  position: fixed;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
  left: -100px;
  top: 50%;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.cursor {
  background-color: #fff;
  z-index: 99999;
  height: 0;
  width: 0;
}

.cursor2, .cursor3 {
  height: 46px;
  width: 46px;
  z-index: 99998;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.cursor2.hover,
.cursor3.hover {
  -webkit-transform: scale(1.4) translateX(-35%) translateY(-35%);
  transform: scale(1.4) translateX(-35%) translateY(-35%);
  border: none;
}

.cursor2.hover {
  background: rgba(255, 255, 255, 0.1);
}

.cursor2.hover .progress-wrap {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0);
}

.cursor2.hover .progress-wrap svg.progress-circle path {
  opacity: 0.4;
}

.navbar-brand {
  height: 35px;
  position: fixed;
  top: 40px;
  right: 40px;
  z-index: 3;
  width: auto;
  display: inline-block;
  margin: 0;
  padding: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.navbar-brand::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 70px;
  transform: translate(-50%, -50%);
  height: 70px;
  opacity: 1;
  z-index: -1;
  background-image: linear-gradient(160deg, var(--black-blue-light-3), var(--black-blue-light));
  animation: border-transform 10s linear infinite alternate forwards;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.navbar-brand img {
  padding: 7px 0;
  height: 100%;
  width: auto;
  display: block;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

@-webkit-keyframes border-transform {
  0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}
@keyframes border-transform {
  0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}

/* Please ❤ this if you like it! */

(function($) { "use strict";

//Parallax & fade on scroll	
	
	function scrollBanner() {
	  $(document).on('scroll', function(){
		var scrollPos = $(this).scrollTop();
		$('.parallax-fade-top').css({
		  'top' : (scrollPos/2.8)+'px',
		  'opacity' : 1-(scrollPos/600)
		});
	  });    
	}
	scrollBanner();	
    
	//Page cursors

Frontend Forever App